<template>
	<div class="sh-example-layout">
		<div class="sh-example-layout-top">
			<h1 class="sh-example-layout-logo">sh-ui</h1>
			<div style="margin-left: auto">
				<span class="sh-example-layout-item">
					<sh-icon type="logo-github"></sh-icon>
				</span>
			</div>
		</div>
		<div class="sh-example-layout-container">
			<sh-split class="sh-example-wrap">
				<template #left>
					<sh-menu v-model="routerValue" class="sh-example-menu" v-bind="wrapMenuConfig" @change="onMenuChange"></sh-menu>
				</template>
				<template #right>
					<router-view />
				</template>
			</sh-split>
		</div>
		<div class="sh-example-layout-bottom">欢迎体验sh-ui<span style="width: 50px"></span>作者：神秘的sh</div>
	</div>
</template>

<script>
import { ShMenu } from '../other.js'
import routers from './router/routers'
export default {
	components: {
		ShMenu
	},
	data() {
		return {
			routerValue: ''
		}
	},
	computed: {
		wrapMenuConfig() {
			return {
				labelField: 'meta.title',
				defaultIcon: false,
				options: routers.filter(item => item.name)
			}
		}
	},
	watch: {
		$route() {
			this.initMenu()
		},
		split(val) {
			console.log(val)
		}
	},
	mounted() {
		this.initMenu()
	},
	methods: {
		initMenu() {
			if (!this.$route.name) return
			this.routerValue = this.$route.name
		},
		// 菜单切换监听
		onMenuChange(menu) {
			this.routerTo(menu)
		}
	}
}
</script>

<style scoped lang="scss">
@mixin layoutFlex {
	display: flex;
	width: 100%;
}
@mixin layoutHeight {
	position: relative;
	height: 100%;
	box-sizing: border-box;
}
.sh-example {
	&-layout {
		@include layoutFlex;
		@include layoutHeight;
		flex-direction: column;
		&-top,
		&-container,
		&-bottom {
			@include layoutFlex;
		}
		&-top {
			position: relative;
			z-index: 50;
			box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
			align-items: stretch;
			.sh-example-layout-logo {
				margin-right: 5%;
				padding: 5px 20px;
				color: var(--vxe-primary-color);
			}
		}
		&-container {
			flex: 1;
		}
		&-bottom {
			justify-content: center;
			padding: 10px;
			background-color: #eee;
		}
		&-item {
			height: 100%;
			display: inline-flex;
			align-items: center;
			padding: 10px;
			&:hover {
				background-color: #eee;
			}
		}
	}
	&-wrap {
		height: 100%;
		position: relative;
		background-color: var(--main-background);
	}
	&-menu {
		min-height: 100%;
	}
}
</style>
